import React, { useState, useEffect } from "react";
import http from "../../http/index";
import styles from "../Friends/index.module.scss";
import { Space, Badge, Tabs, ProductCard } from "react-vant";
import { Gem, Search } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";

//数据的类型
//tab顶部
interface abc {
  departmentName: string;
  id: number;
  pic: string;
  rank: number;
}
// 病友圈首页参数类型
interface pathienCircleHomeListRawState {
  amount: number;
  collectionNum: number;
  commentNum: number;
  detail: string;
  releaseTime: number;
  sickCircleId: number;
  title: string;
}

export default function Friends() {
  const navigate = useNavigate();
  //tab切
  const [list, setList] = useState<abc[]>([]);
  const [tablist, setTablist] = useState<pathienCircleHomeListRawState[]>([]);
  let [departmentId, setdepartmentId] = useState();
  const setClick = (e: any) => {
    // console.log(e);
    setdepartmentId(e);
    // console.log(departmentId);
    getTbList();
  };
  //tab标题
  const getList = async () => {
    const res: any = await http.get(
      "/health/share/knowledgeBase/v1/findDepartment"
    );
    setList(res.result);
    setdepartmentId(res.result[0].id);
    // console.log(res.result);
  };

  //-----tab数据
  const getTbList = async () => {
    const resd: any = await http.get(
      "/health/user/sickCircle/v1/findSickCircleList",
      {
        params: { departmentId: departmentId, page: 1, count: 5 },
      }
    );
    setTablist(resd.result);
    // console.log(resd);
  };
  useEffect(() => {
    getList();
  }, []);

  useEffect(() => {
    if (!departmentId) return;
    getTbList();
  }, [departmentId]);

  return (
    <>
      {/* 头像 */}
      <div className={styles.set_home}>
        <p className={styles.set_p}>头像</p>
        <Space className={styles.demo_icon} gap={20}>
          <Badge dot>
            <Gem className={styles.demo_icons} />
          </Badge>
        </Space>
      </div>
      {/* 双层tab切换 */}
      {
        <div className={styles.setsstab}>
          <Tabs
            className={styles.set_tabs}
            active={departmentId}
            onChange={setClick}
          >
            {list.map((item, ind) => (
              <Tabs.TabPane
                key={ind}
                name={item.id}
                title={`${item.departmentName}`}
              ></Tabs.TabPane>
            ))}
          </Tabs>
          <span>
            <Space
              onClick={() => {
                navigate("/Friendsseek");
              }}
              className={styles.demo_sicon}
              gap={20}
            >
              <Search />
            </Space>
          </span>
        </div>
      }
      <div>
        {tablist.length > 0 &&
          tablist.map((item2, ind) => {
            return (
              <ProductCard
                className={styles.set_nr}
                key={item2.sickCircleId}
                desc={item2.title}
                title={item2.detail}
                onClick={() => {
                  navigate(`/ferid/${item2.sickCircleId}`);
                }}
              />
            );
          })}
      </div>
    </>
  );
}
